<template>
	<view class="content">
		<!-- <view class="chhose_item" v-if="isShow">
			<u-tabs :list="list" lineWidth="0" lineColor="#f56c6c" :activeStyle="{
              color: '#55B877',
              height: '56rpx',
              'line-height': '56rpx',
              'text-align': 'center',
              'border-radius': '32rpx 32rpx 32rpx 32rpx',
              'font-size': '28rpx',
            }" :inactiveStyle="{
              height: '56rpx',
              'line-height': '56rpx',
              'text-align': 'center',
              color: '#ADADAD',
              'font-size': '28rpx',
            }" itemStyle="padding:0 30rpx; height: 56rpx'width: 100rpx" @change="change">
			</u-tabs>
		</view> -->
		<view v-if="currentIndex < 2">
			<view class="card" v-for="item in list" :key="item" @click="goDetail(item)">
				<view class="card_top">
					<view class="card_name">{{item.title}}</view>
					<view class="card_icon">
						<u-icon name="arrow-right" color="#ADADAD" size="20"></u-icon>
					</view>
				</view>
				<!-- <view class="card_content"></view> -->
				<view class="card_bottom">
					<!-- 头像 -->
					<view class="avatar">
						<image class="zanImg" :src="item.user.avatar_url"></image>
						<view class="nick">{{item.user.nick_name}}</view>
					</view>
					<view class="avatarRight">
						<view class="time">{{item.create_time}}</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="currentIndex == 2" @click="goDetail">
			<view class="new_card" v-for="item in 10" :key="item">
				<view class="card_top">
					<view class="card_name">第一百零六章：巴蜀全貌</view>
					<view class="card_icon">
						<u-icon name="arrow-right" color="#ADADAD" size="20"></u-icon>
					</view>
				</view>
				<view class="card_content">《巴纳姆效应》</view>
				<view class="card_bottom">
					<!-- 头像 -->
					<view class="avatar">
						<image class="zanImg" src="https://cdn.uviewui.com/uview/album/1.jpg"></image>
						<view class="nick">柳语晨</view>
					</view>
					<view class="avatarRight">
						<view class="time">2023年09月06日</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="currentIndex == 3" @click="goPage">
			<view class="card" v-for="item in 3" :key="item">
				<view class="card_top">
					<view class="card_name">《巴纳姆效应》</view>
					<view class="card_icon">
						<u-icon name="arrow-right" color="#ADADAD" size="20"></u-icon>
					</view>
				</view>
				<!-- <view class="card_content"></view> -->
				<view class="card_bottom">
					<!-- 头像 -->
					<view class="avatar1">
						内容 10
					</view>
					<!-- <view class="avatar_show">仅自己可见</view> -->
					<!-- <view class="avatar_show">粉丝可见</view> -->
					<!-- <view class="avatar_show">公开</view> -->
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			isShow: {
				type: Boolean,
				default: true
			},
			currentIndex: {
				type: Number,
				default: 0
			},
			list:{
				type:Array,
				default:() => {
					return []
				}
			}
		},
		data() {
			return {
				// list: [{
				// 		name: "按浏览",
				// 	},
				// 	{
				// 		name: "按点赞",
				// 	},
				// 	{
				// 		name: "最新",
				// 	},
				// ],
			};
		},
		methods: {
			change(e) {
				console.log("eeeeeee", e);
				// this.currentIndex = e.index;
			},
			goDetail(item) {
				uni.navigateTo({
					url: `/pages/detail/flyDetail?detailType=wen&from=search&currentId=` + item.id,
				});
			},
			goPage() {
				uni.navigateTo({
					url: `/pages/detail/wenList`,
				});
			}
		},
	};
</script>
<style scoped lang="scss">
	.content {
		height: 100%;
		box-sizing: border-box;

		.card {
			// margin-left: 30rpx;
			margin-top: 32rpx;
			width: 690rpx;
			height: 200rpx;

			background: #F7F8FA;
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.card_top {
				display: flex;
				justify-content: space-between;
				padding: 32rpx 32rpx 24rpx;

				.card_name {
					font-size: 32rpx;
					font-weight: 400;
					color: #444444;
				}
			}

			.card_content {
				padding-left: 32rpx;
				width: 269rpx;
				height: 44rpx;
				font-size: 26rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #444444;
				line-height: 38rpx;
			}

			.card_bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 32rpx;

				.avatar {
					display: flex;
					align-items: center;

					.zanImg {
						width: 56rpx;
						height: 56rpx;
						border-radius: 28rpx;
					}

					.nick {
						font-size: 24rpx;
						margin-left: 16rpx;
						font-weight: 400;
						color: #444444;
					}
				}

				.avatar1 {
					font-size: 26rpx;
					color: #ADADAD;
				}

				.avatar_show {
					font-size: 26rpx;
					color: #ADADAD;
				}

				.avatarRight {
					font-size: 24rpx;
					font-weight: 400;
					color: #adadad;
				}
			}
		}

		.new_card {
			margin-left: 30rpx;
			margin-top: 32rpx;
			width: 690rpx;
			height: 268rpx;
			background: rgba(39, 39, 39, 0.5);
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.card_top {
				display: flex;
				justify-content: space-between;
				padding: 32rpx 32rpx 24rpx;

				.card_name {
					font-size: 32rpx;
					font-weight: 400;
					color: #eeeeee;
				}
			}

			.card_content {
				padding-left: 32rpx;
				width: 269rpx;
				height: 44rpx;
				font-size: 26rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #eeeeee;
				line-height: 38rpx;
			}

			.card_bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 32rpx;

				.avatar {
					display: flex;
					align-items: center;

					.zanImg {
						width: 56rpx;
						height: 56rpx;
						border-radius: 28rpx;
					}

					.nick {
						font-size: 24rpx;
						margin-left: 16rpx;
						font-weight: 400;
						color: #eeeeee;
					}
				}

				.avatarRight {
					font-size: 24rpx;
					font-weight: 400;
					color: #adadad;
				}
			}
		}
	}
</style>